<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>朔望 -个人信息编辑</title>
    <!--    Rem初始-->
    <script src="/Syzygy/static/js/RemInitialize.js"></script>
</head>
<body style="margin: 0 0;padding: 0 0">
<!--背景图 用户信息 -->
<div style="width: 1rem;height: 0.25rem;">
    <!--    用户背景图-->
    <div id="userBackgroundImage" style="width: 1rem;height: 0.25rem;background-size: cover">
        <!--    导航栏-->
        <div style="width:1rem;height: 0.04rem;position: absolute;z-index: 2">
            <!--        logo-->
            <div style="float:left;width: 0.1rem;height:0.04rem;">
                <img src="/Syzygy/static/imgs/page/logo.png"
                     style="float: left;width: 0.07rem;height: 0.03rem;margin: 0.005rem 0.015rem">
            </div>
            <!--        导航1-->
            <a href="/Syzygy/">
                <div style="float:left;width: 0.1rem;height:0.04rem;">
                    <div style="margin: 0.006rem;font-size: 0.02rem;color: white;text-align: center">
                        主页
                    </div>
                </div>
            </a>
            <!--        导航2-->
            <div style="float:left;width: 0.1rem;height:0.04rem;">
                <div style="margin: 0.006rem;font-size: 0.02rem;color: white;text-align: center">
                    导航2
                </div>
            </div>
            <!--        导航3-->
            <div style="float:left;width: 0.1rem;height:0.04rem;">
                <div style="margin: 0.006rem;font-size: 0.02rem;color: white;text-align: center">
                    导航3
                </div>
            </div>
            <!--        导航4-->
            <div style="float:left;width: 0.1rem;height:0.04rem;">
                <div style="margin: 0.006rem;font-size: 0.02rem;color: white;text-align: center">
                    导航4
                </div>
            </div>
            <!--        注销 -->
            <div th:if="${userIdSession}" style="float:right;width: 0.1rem;height:0.04rem;">
                <div style="margin: 0.006rem;font-size: 0.02rem;color: white;border: solid white;text-align: center">
                    <a href="/Syzygy/User/Logout" style="color:white;text-decoration: none;">
                        注销
                    </a>
                </div>
            </div>
        </div>
        <!--    头像及昵称与个人签名-->
        <div style="color: rgba(20,20,20,0.5);width: 1rem;height: 0.06rem;position: relative;top: 70%">
            <!--            头像-->
            <div style="float:left;width: 0.06rem;height: 0.06rem;margin: 0 0 0 0.04rem">
                <img th:src="@{'/static/imgs/headsculpture/' + ${userByUserId.headSculptureDocumentName}}"
                     style="width: 0.06rem;height: 0.06rem;float: left">
            </div>
            <!--            昵称与个人签名 -->
            <div style="float:left;margin: 0 0 0.01rem 0.01rem;color: white">
                <div th:text="${userByUserId.nickname}" style="font-size: 0.03rem;">

                </div>
                <div th:text="${userByUserId.personalIntroduction}"
                     style="font-size: 0.015rem;background: rgba(200,200,200,0.8)">

                </div>
            </div>
        </div>
    </div>
</div>
<!--图片展示-->
<div style="margin: 0.01rem">
    <style>
        table, tr, th, td {
            border-collapse: collapse;
            border: 0.002rem solid rgb(200, 200, 200);
        }
    </style>
    <table style="width:0.8rem;background-color:rgb(230,230,230);font-size: 0.015rem;margin: 0 auto;text-align: center">
        <tr>
            <th colspan="6">我的照片</th>
        </tr>
        <tr>
            <th>图片</th>
            <th>描述</th>
            <th>分类</th>
            <th>价格</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <tr th:each="picture : ${picturesByUserId}"> <!--Thymeleaf-->
            <td><img th:src="@{'/static/imgs/pictures/'+${picture.pictureDocumentName}}"
                     style="max-width: 0.2rem;display: block;margin: 0 auto"></td>
            <td th:text="${picture.describe}"></td>
            <td th:text="${picture.type.typeName}"></td>
            <td th:text="${picture.price}"></td>
            <td th:text="${picture.state} == 1 ? '在售':'停售'"></td>
            <td>
                <button th:id="@{'edit-'+${picture.pictureId}}">编辑</button>
                <form th:action="'/Syzygy/Picture/id/'" method="post">
                    <input type="hidden" name="_method" value="DELETE">
                    <input type="submit" value="删除">
                    <input type="hidden" name="pictureId" th:value="${picture.pictureId}">
                </form>
                <form action="/Syzygy/Picture/state/" method="post">
                    <input type="submit" value="开售">
                    <input type="hidden" name="_method" value="PUT">
                    <input type="hidden" name="state" value="1">
                    <input type="hidden" name="pictureId" th:value="${picture.pictureId}">
                </form>
                <form action="/Syzygy/Picture/state/" method="post">
                    <input type="submit" value="停售">
                    <input type="hidden" name="_method" value="PUT">
                    <input type="hidden" name="state" value="-1">
                    <input type="hidden" name="pictureId" th:value="${picture.pictureId}">
                </form>

            </td>
        </tr>
    </table>
</div>
<!--编辑卡片-->
<div id="pictureEditCard"
     style="display:none;border-radius:0.03rem;background-color:rgb(210,210,210);position:fixed;width: 0.6rem;height: 0.4rem;margin:auto;left: 0;right: 0;top: 0;bottom: 0">
    <div style="border-radius:0.03rem;float:left;width: 0.3rem ;height: 0.4rem;background-color: rgb(200,200,200)">
        <div id="editPicture"
             th:style="'background-image:url(' + '/Syzygy/static/imgs/pictures/' + 'a1.jpg' + ');float: left;width: 0.3rem;height: 0.4rem;background-position: center center;background-size: contain;background-repeat:no-repeat'"
             style="">
        </div>
    </div>
    <div style="float:left;width: 0.3rem ;height: 0.4rem;font-size: 0.015rem">
        <div style="width: 0.28rem;height: 0.38rem;margin: 0.01rem auto">
            <form action="/Syzygy/Picture/id/" method="post" onsubmit="return checkUpdatePicture()">
                <input type="hidden" name="_method" value="PUT">
                <!--                图片描述-->
                请输入图片描述：
                <input id="describe" maxlength="100" type="text" name="describe"
                       style="background: rgb(190,190,190);width: 0.275rem;height: 0.1rem"></br>
                <!--                价格-->
                请输入价格：</br>
                <input id="price" type="text" name="price"
                       style="background: rgb(190,190,190);width: 0.275rem;height: 0.02rem"></br>
                请选择类型：</br>
                <!--                类型-->

                <input id="submit2" type="submit">
            </form>
        </div>
    </div>
</div>
<!--编辑返回-->
<div class="pictureEditCardReturn"
     style="width: 0.2rem;height:0.5rem;position: fixed;top: 0;left:0;display: none"></div>
<div class="pictureEditCardReturn"
     style="width: 0.2rem;height:0.5rem;position: fixed;top: 0;;right:0;display: none"></div>
<!--用户背景图加载-->
<script th:inline="javascript">
    const userByUserIdJSON = [[${userByUserIdJSON}]];
    let userByUserId = JSON.parse(userByUserIdJSON);
    console.log(userByUserId.backgroundImageDocumentName);
    if(userByUserId.backgroundImageDocumentName == null || userByUserId.backgroundImageDocumentName == ""){
        document.getElementById('userBackgroundImage').style.backgroundImage =
            "url(" + "/Syzygy/static/imgs/pictures/oFREHNLl7m.jpeg)";
    }else {
        document.getElementById('userBackgroundImage').style.backgroundImage =
            "url(" + "/Syzygy/static/imgs/pictures/" + userByUserId.backgroundImageDocumentName + ")";
    }
</script>
<!--编辑'编辑'按钮点击事件：编辑框的显示-->
<script th:inline="javascript">
    const pictureEditCard = document.getElementById('pictureEditCard');
    const editPicture = document.getElementById('editPicture');
    const pictureEditCardReturn = document.getElementsByClassName('pictureEditCardReturn');
    const picturesByUserIdJSON = [[${picturesByUserIdJSON}]];
    let picturesByUserId = JSON.parse(picturesByUserIdJSON);
    for (let i = 0; i < picturesByUserId.length; i++) {
        (function () {
            const pictureEditButton = document.getElementById("edit-" + picturesByUserId[i].pictureId);
            pictureEditButton.addEventListener("click", function () {
                pictureEditCard.style.display = 'block';
                pictureEditCardReturn[0].style.display = 'block';
                pictureEditCardReturn[1].style.display = 'block';
                editPicture.style.backgroundImage = 'url(/Syzygy/static/imgs/pictures/' + picturesByUserId[i].pictureDocumentName + ')';
                // 添加隐藏id
                const submit = document.querySelector('#submit2');
                let typeStr2 = `
            <!--  类别单选按钮 -->
                <input id="hiddenPictureId" type="hidden" name="pictureId" value="">
                `;
                submit.insertAdjacentHTML("afterend", typeStr2);
                const hiddenPictureId = document.getElementById('hiddenPictureId');
                hiddenPictureId.value = picturesByUserId[i].pictureId;
            })
        }());
    }
    pictureEditCardReturn[0].addEventListener("click", function () {
        pictureEditCard.style.display = 'none';
        pictureEditCardReturn[0].style.display = 'none';
        pictureEditCardReturn[1].style.display = 'none';
    });
    pictureEditCardReturn[1].addEventListener("click", function () {
        pictureEditCard.style.display = 'none';
        pictureEditCardReturn[0].style.display = 'none';
        pictureEditCardReturn[1].style.display = 'none';
    });
</script>
<!--表单的校验-->
<script th:inline="javascript">
    function checkUpdatePicture() {
        let describeInput = document.getElementById('describe');
        let describeInputValue = describeInput.value;
        let priceInput = document.getElementById('price');
        let priceInputValue = priceInput.value;
        let priceCheck = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
        if (null == describeInputValue) {
            alert('未填写图片描述!')
            return false;
        }
        if (!priceCheck.test(priceInputValue)) {
            alert('请输入正确图片价格!')
            return false;
        }

        let typeInput = document.getElementsByName('typeId');
        let typeInputHave = false;
        for (let i = 0; i < typeInput.length; i++) {
            if (typeInput[i].checked) {
                typeInputHave = true;
            }
        }
        if (typeInputHave == false) {
            alert('请选择图片类型!')
            return false;
        }

        return true;
    }
</script>
<!--        添加类型导航-->
<script th:inline="javascript">
    const submit = document.querySelector('#submit2');
    const allTypeJSON = [[${allTypeJSON}]];
    let allType = JSON.parse(allTypeJSON);

    // 添加类型导航
    for (let i = 0; i < allType.length; i++) {
        let typeId = allType[i].typeId;
        let typeName = allType[i].typeName;
        let typeStr = `
            <!--  类别单选按钮 -->
                <input type="radio" name="typeId" value="${typeId}" style="background: green">${typeName}
        `;
        submit.insertAdjacentHTML("beforebegin", typeStr);
    }

</script>
</body>
</html>